<template>
  <div>
    <el-col :offset="9" :span="8">
      <el-input v-model="addGradeInfo.id" placeholder="成绩编号" type="number"></el-input>
      <el-input v-model="addGradeInfo.grade" placeholder="成绩" type="number"></el-input>
      <el-button type="primary" @click="addGrade">录入成绩</el-button>
    </el-col>
    <el-input v-model="params.courseId" placeholder="输入课程号搜索" class="search-bar" @input="getGrades" style="width: 260px"
      :suffix-icon="Search"></el-input>
    <el-table :data="grades" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }">
      <el-table-column prop="id" label="成绩编号"></el-table-column>
      <el-table-column prop="studentName" label="学生姓名"></el-table-column>
      <el-table-column prop="courseName" label="课程名称"></el-table-column>
      <el-table-column prop="courseId" label="课程号"></el-table-column>
      <el-table-column prop="teacherName" label="授课教师"></el-table-column>
      <el-table-column prop="grade" label="成绩"></el-table-column>

    </el-table>
    <el-divider></el-divider>
    <el-button @click="calculateStatistics" type="success">展示统计信息</el-button>
    <div v-if="statistics" class="statistics">
      <p>每个学生的总学分：</p>
      <ul>
        <li v-for="item in statistics" :key="item.id">{{ item.name }}: {{ item.totalCredits }}</li>
      </ul>
      <el-divider></el-divider>
      <p>每门课程的平均成绩、最高分、最低分：</p>
      <ul>
        <li v-for="(item, index) in statistics2" :key="index">{{ item.courseName }}: 平均成绩 {{ item.avgScore }} &nbsp 最高分
          {{
            item.maxScore }} &nbsp 最低分 {{ item.minScore }}</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { reactive } from 'vue';
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { addScoreService, getAllScoreService, getCreditService, getEnrollmentService } from '@/api/manager.js'
const statistics = ref(null);
const statistics2 = ref(null);
const grades = ref([])
const addGradeInfo = reactive({
  studentId: '',
  courseId: '',
  grade: '',
  id: ''
});

// 定义请求参数对象
const params = ref({
  pageNo: 1, // 当前页
  pageSize: 1000, // 当前生效的每页条数
  courseId: ''
})

//展示所有学生成绩
const getGrades = async () => {
  const res = await getAllScoreService(params.value)
  grades.value = res.data.records
}
getGrades()

const addGrade = async () => {
  if (addGradeInfo.grade && addGradeInfo.id) {
    await addScoreService(addGradeInfo)
    getGrades()
    ElMessage.success('添加成功!')
    addGradeInfo.studentId = ''
    addGradeInfo.courseId = ''
    addGradeInfo.grade = ''
    addGradeInfo.id = ''
  } else {
    ElMessage.error('请填写完整信息!')
  }
};

const calculateStatistics = async () => {
  const res = await getCreditService()
  statistics.value = res.data
  const res2 = await getEnrollmentService()
  statistics2.value = res2.data.gradeStatisticsVOList

  console.log(statistics2.value)
};
</script>
<style scoped lang="scss">
.el-input {
  margin: 10px 0;
}

.statistics {
  ul {
    margin-left: 800px;
  }

  p {
    font-weight: bold;
    margin-left: 800px;
  }

  padding-bottom: 200px;
}
</style>